<template>
  <div class="main-box">
    <van-nav-bar class="top-title" title="运动" placeholder="true" fixed="true" />
    <van-tabs :active="activeName" animated swipeable class="van-tabs">
      <van-tab title="计时器" class="van-tab">
        <div class="box1">
          <div class="time">
            <van-circle
              :current-rate="currentRate"
              :rate="rate"
              :speed="100"
              :text="text"
              class="van-circle"
              size="150px"
            />
          </div>
          <div class="set-time">
            <div class="button" @click="setTime">设置时间</div>
            <van-grid clickable class="van-grid">
              <van-grid-item text="开始" icon="play-circle-o" @click="start" />
              <van-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
              <van-grid-item text="重置" icon="replay" @click="reset" />
            </van-grid>
          </div>
        </div>
      </van-tab>
      <van-tab title="跑步" name="paobu" class="van-tab">
        <div class="box2">
          <div class="circle">
            总公里数
            <span>{{ runAllKm }}</span>
          </div>
          <div class="text">附近有20个人跑步</div>
        </div>
        <hr>
        <div class="box3">
          <div class="title">今日目标</div>
          <div class="data">
            <div class="left">
              <van-circle :current-rate="68" :rate="68" :speed="100" :text="'68%'" />
            </div>
            <div class="right">
              <div class="text">已跑{{ runKm }}km</div>
              <div class="text">已运动{{ runMin }}分钟</div>
            </div>
          </div>
        </div>
        <hr>
        <div class="box3">
          <div class="title">本周目标</div>
          <div class="data">
            <div class="left">
              <van-circle :current-rate="50" :rate="50" :speed="100" :text="'50%'" />
            </div>
            <div class="right">
              <div class="text">已跑{{ weekRunKm }}km</div>
              <div class="text">已运动{{ weekRunMin }}分钟</div>
            </div>
          </div>
        </div>
        <hr>
      </van-tab>
      <van-tab title="骑车" class="van-tab">
        <div class="box2">
          <div class="circle">
            总公里数
            <span>{{ BikeAllKm }}</span>
          </div>
          <div class="text">附近有33个人骑车</div>
        </div>
        <hr>
        <div class="box3">
          <div class="title">今日目标</div>
          <div class="data">
            <div class="left">
              <van-circle :current-rate="91" :rate="91" :speed="100" :text="'91%'" />
            </div>
            <div class="right">
              <div class="text">已骑车{{ BikeKm }}km</div>
              <div class="text">已运动{{ BikeMin }}分钟</div>
            </div>
          </div>
        </div>
        <hr>
        <div class="box3">
          <div class="title">本周目标</div>
          <div class="data">
            <div class="left">
              <van-circle :current-rate="73" :rate="73" :speed="100" :text="'73%'" />
            </div>
            <div class="right">
              <div class="text">已骑{{ weekBikeKm }}km</div>
              <div class="text">已运动{{ weekBikeMin }}分钟</div>
            </div>
          </div>
        </div>
        <hr>
      </van-tab>
      <van-tab title="跳绳" class="van-tab">
        <div class="box2">
          <div class="circle">
            总跳绳数
            <span>{{ JumpAllG }}</span>
          </div>
          <div class="text">附近有1个人跳绳</div>
        </div>
        <hr>
        <div class="box3">
          <div class="title">今日目标</div>
          <div class="data">
            <div class="left">
              <van-circle :current-rate="93" :rate="93" :speed="100" :text="'93%'" />
            </div>
            <div class="right">
              <div class="text">已跳{{ JumpG }}个</div>
              <div class="text">已运动{{ JumpMin }}分钟</div>
            </div>
          </div>
        </div>
        <hr>
        <div class="box3">
          <div class="title">本周目标</div>
          <div class="data">
            <div class="left">
              <van-circle :current-rate="67" :rate="67" :speed="100" :text="'67%'" />
            </div>
            <div class="right">
              <div class="text">已跳{{ weekJumpG }}km</div>
              <div class="text">已运动{{ weekJumpMin }}分钟</div>
            </div>
          </div>
        </div>
        <hr>
      </van-tab>
    </van-tabs>
    <van-action-sheet :show="show" title="选择时间" class="van-action-sheet">
      <div class="content">
        <van-time-picker
          v-model="currentTime"
          title="选择时间"
          :columns-type="columnsType"
          class="van-time-picker"
          @confirm="confirm"
        />
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

var activeName = 'paobu'

var show = ref(false)
var rate = ref(100)

var runAllKm = ref(12.3)
var runKm = ref(3)
var runMin = ref(40)
var weekRunKm = ref(12)
var weekRunMin = ref(150)


var BikeAllKm = ref(36.3)
var BikeKm = ref(16)
var BikeMin = ref(61)
var weekBikeKm = ref(42)
var weekBikeMin = ref(310)


var JumpAllG = ref(1120)
var JumpG = ref(233)
var JumpMin = ref(5)
var weekJumpG = ref(812)
var weekJumpMin = ref(62)


const currentRate = ref(0)
const text = computed(
  () =>
    (currentRate.value / 3600).toFixed(0) +
    ':' +
    ((currentRate.value - (currentRate.value / 3600).toFixed(0) * 3600) / 60).toFixed(0) +
    ':' +
    (currentRate.value % 60).toFixed(0)
)

const currentTime = ref(['00', '00', '00'])
const columnsType = ['hour', 'minute', 'second']

function setTime() {
  show.value = true
}

function confirm() {
  show.value = false
}

let timer = null
function start() {
  rate.value =
    parseInt(currentTime.value[0]) * 60 * 60 +
    parseInt(currentTime.value[1]) * 60 +
    parseInt(currentTime.value[2])
  if (timer) return // 防止重复启动计时器
  timer = setInterval(() => {
    if (currentRate.value < rate.value) {
      currentRate.value += 1
    } else {
      clearInterval(timer)
      timer = null
    }
  }, 1000) // 每1秒更新一次
}
function pause() {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}
function reset() {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  currentRate.value = 0
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
.main-box {
  .top-title {
  }
  .van-tabs {
    .van-tab {
      .box1 {
        .time {
          margin-top: 50px;
          margin-left: 30%;
          margin-right: auto;
        }
        .set-time {
          .button {
            width: 80%;
            height: 50px;
            background: rgb(25, 137, 250);
            color: white;
            font-size: 25px;
            text-align: center;
            margin-left: 10%;
            padding-top: 15px;
          }
          .van-grid {
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .box2 {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        height: 220px;
        .circle {
          margin-left: 130px;
          display: flex;
          flex-direction: column;
          width: 200px;
          height: 200px;
          border: 2px solid rgb(2, 110, 152);
          border-radius: 50%;
          text-align: center;
          padding-top: 50px;
          span {
            margin-top: 20px;
            font-size: 50px;
          }
        }
        .text {
          margin-top: 160px;
          position: absolute;
          background: white;
          height: 50px;
          width: 100%;
          text-align: center;
          padding-top: 10px;
        }
      }
      .box3{
        display: flex;
        flex-direction: column;
        height: 120px;
        margin-top: 20px;
        margin-bottom: 40px;
        .title{
          font-size: 25px;
          margin-bottom: 20px;
        }
        .data{display: flex;
          .left{
          }
          .right{
            flex: 1;
            .text{
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
